<template>
    <div
        class="container-body ucenter"
        :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
    >
        <div class="user-banner">
            <router-link
                to="/"
                class="a-link"
            >首页
            </router-link>
            <span class="iconfont icon-right"></span>
            <span>个人中心</span>
        </div>
        <div class="ucenter-panel">
            <div class="user-side">
                <!-- 个人头像信息 -->
                <div class="avatar-panel">
                    <div
                        class="edit-btn a-link"
                        v-if="isCurrentUser"
                        @click="updateUserInfo"
                    >编辑资料
                    </div>
                    <div class="avatar-inner">
                        <Avatar
                            :userId="userInfo.userId"
                            :width="120"
                        ></Avatar>
                    </div>
                    <div class="nick-name">
                        <span>{{ userInfo.nickName }}</span>
                        <span
                            v-if="userInfo.sex == 0"
                            class="iconfont icon-woman"
                        ></span>
                        <span
                            v-if="userInfo.sex == 1"
                            class="iconfont icon-man"
                        ></span>
                    </div>
                    <div class="desc">
                        {{ userInfo.personDescription }}
                    </div>
                </div>
                <!-- 扩展信息 -->
                <div class="user-extend-panel">
                    <div class="info-item">
                        <div class="label iconfont icon-integral">积分</div>
                        <div
                            @click="loadRecord"
                            class="value a-link"
                            v-if="isCurrentUser"
                        >{{ userInfo.currentIntegral }}</div>
                        <div
                            class="value"
                            v-else
                        >{{ userInfo.currentIntegral }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label iconfont icon-like">获赞</div>
                        <div class="value">{{ userInfo.likeCount }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label iconfont icon-post">发帖</div>
                        <div class="value">{{ userInfo.postCount }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label iconfont icon-register">加入</div>
                        <div class="value">{{ userInfo.joinTime }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label iconfont icon-login">最后登录</div>
                        <div class="value">{{ userInfo.lastLoginTime }}</div>
                    </div>
                </div>
            </div>


            <div class="article-panel">
                <el-tabs
                    :model-value="activeTabName"
                    @tab-change="changeTab"
                >
                    <el-tab-pane
                        label="发帖"
                        :name="0"
                    >
                    </el-tab-pane>
                    <el-tab-pane
                        label="评论"
                        :name="1"
                    >
                    </el-tab-pane>
                    <el-tab-pane
                        label="点赞"
                        :name="2"
                    >
                    </el-tab-pane>
                </el-tabs>
                <div class="article-list">
                    <DataList
                        :dataSource="articleListInfo"
                        :loading="loading"
                        @loadArticle="loadArticle"
                        noDataMsg="暂无相关文章"
                    >
                        <template #default="{ data }">
                            <ArticleListItem
                                :showEdit="isCurrentUser && activeTabName == 0"
                                :data="data"
                                :showComment="showComment"
                            ></ArticleListItem>
                        </template>
                    </DataList>
                </div>
            </div>
        </div>
        <!-- 修改用户信息 -->
        <UcenterEdit
            @resetUserInfo="handleResetUserInfo"
            ref="UcenterEditRef"
        ></UcenterEdit>
        <!-- 查看积分信息 -->
        <UserIntegralRecord
            @loadData="loadRecord"
            ref="UcenterIntegralRecordRef"
        ></UserIntegralRecord>
    </div>
</template>

<script setup>
import UcenterEdit from '@/views/ucenter/UcenterEdit.vue';
import UserIntegralRecord from '@/views/ucenter/UserIntegralRecord.vue';

import ArticleListItem from '@/views/forum/ArticleListItem.vue';

import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const store = useStore();

const api = {
    getUserInfo: '/ucenter/getUserInfo',
    loadArticle: '/ucenter/loadUserArticle'
}

const userId = ref(null)

const userInfo = ref({})
const loadUserInfo = async () => {
    let result = await proxy.Request({
        url: api.getUserInfo,
        params: {
            userId: userId.value
        },
        errorCallBack: () => {
            setTimeout(() => {
                router.push("/")
            }, 1500);
        }
    })
    if (!result) {
        return
    }
    userInfo.value = result.data

}

// 右侧文章 
const activeTabName = ref(0)
const changeTab = (e) => {
    activeTabName.value = e;
    loadArticle();
}

const articleListInfo = ref({})
// 是否加载
const loading = ref(false)
const loadArticle = async () => {
    // 开启加载
    loading.value = true
    let result = await proxy.Request({
        url: api.loadArticle,
        params: {
            pageNo: articleListInfo.value.pageNo,
            userId: userId.value,
            type: activeTabName.value
        },
        showLoading: false
    })
    // 关闭加载
    loading.value = false
    if (!result) {
        return
    }
    articleListInfo.value = result.data
}

// 修改用户信息
const UcenterEditRef = ref()
const updateUserInfo = () => {
    UcenterEditRef.value.showEditUserInfoDialog(userInfo.value)
}

// 获取用户积分记录
const UcenterIntegralRecordRef = ref()
const loadRecord = () => {
    UcenterIntegralRecordRef.value.showRecord()
}

const handleResetUserInfo = (updatedUserInfo) => {
    userInfo.value = updatedUserInfo
}

watch(() => route.params.userId, (newVal, oldVal) => {
    if (newVal) {
        userId.value = newVal;
        console.log('onmounted', userId.value);
        loadUserInfo();
        loadArticle();
    }
}, { immediate: true, deep: true });

// 判断用户是否为当前登录用户
const isCurrentUser = ref(false)
watch(() => store.state.loginUserInfo, (newVal, oldVal) => {

    if (newVal != null && newVal.userId == userId.value) {
        isCurrentUser.value = true
    } else {
        isCurrentUser.value = false
    }
    console.log(isCurrentUser.value);

}, { immediate: true, deep: true });


// 是否展示评论区
const showComment = ref(false)

// 监听系统设置
watch(() => store.state.sysSetting, (newVal, oldVal) => {
    if (newVal) {
        showComment.value = newVal.commentOpen
    }
}, { immediate: true, deep: true });
</script>

<style lang="scss" scoped>
.ucenter {
    .user-banner {
        line-height: 35px;

        .icon-right {
            padding: 0px 5px;
        }
    }

    .ucenter-panel {
        display: flex;

        .user-side {
            width: 300px;
            margin-right: 10px;

            .avatar-panel {
                text-align: center;
                background: #fff;
                padding: 10px;

                .edit-btn {
                    text-align: right;
                    font-size: 14px;
                }

                .avatar-inner {
                    display: flex;
                    justify-content: center;
                }

                .nick-name {
                    .iconfont {
                        margin-left: 5px;
                        color: var(--link);
                    }
                }

                .desc {
                    text-align: left;
                    margin-top: 5px;
                    font-size: 13px;
                    color: #959494;
                }
            }

            .user-extend-panel {
                margin-top: 10px;
                padding: 10px;
                background: #fff;

                .info-item {
                    display: flex;
                    justify-content: space-between;

                    .label {
                        font-size: 13px;
                        line-height: 30px;
                    }

                    .label::before {
                        font-size: 22px;
                        color: #888888;
                        padding-right: 5px;
                    }
                }
            }
        }

        .article-panel {
            flex: 1;
            background: #fff;
            padding: 0px 10px;
        }
    }
}
</style>
